<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            账号:
            <input type="text" name="" id="" v-model="user">
        </div>
        <div>密码:
            <input type="text" name="" id="" v-model="password">
        </div>
        <div>
            性别:
            <input type="radio" v-model="nan" name="ll" id="" value="男">男
            <input type="radio" v-model="nan" name="ll" id="" value="女">女
        </div>
        <div >
            爱好:
            <input type="checkbox" name="aihao" id="" value="唱歌" v-model="hobby">唱歌
            <input type="checkbox" name="aihao" id="" value="跳舞" v-model="hobby">跳舞
            <input type="checkbox" name="aihao" id="" value="学习" v-model="hobby">学习
        </div>
        <div>
            职业:
            <select name="" id="" v-model="zhiye">
                <option value=""></option>
                <option value="web开发工程师">web开发工程师</option>
                <option value="java开发工程师">java开发工程师</option>
                <option value="php开发工程师">php开发工程师</option>
            </select>
        </div>
        <div>
            <button @click="_click">注册</button>
        </div>



        <script>
            new Vue({
                el:"#app",
                data:{
                    zhiye:"",
                    nan:"",
                    hobby:[],
                    user:"",
                    password:"",
                },
                methods: {
                    _click(){
                        console.log(this.hobby,this.zhiye,this.nan,this.password,this.user);
                    }
                }
            })
        </script>

    </div>
</body>

</html>